<template>
	<view class="content" :class="{'active':active}" :style="{background: backgroundGradient}">
		<!-- 科技风格背景 -->
		<view class="tech-background">
			<view class="particles-container">
				<view class="particle" v-for="i in 20" :key="i" :style="getParticleStyle(i)"></view>
			</view>
			<view class="circuit-board">
				<view class="circuit-line horizontal line-1" :style="{background: circuitGradient}"></view>
				<view class="circuit-line horizontal line-2" :style="{background: circuitGradient}"></view>
				<view class="circuit-line vertical line-3" :style="{background: circuitGradient}"></view>
				<view class="circuit-line vertical line-4" :style="{background: circuitGradient}"></view>
			</view>
			<view class="glow-orb orb-1" :style="{background: orbGradient1}"></view>
			<view class="glow-orb orb-2" :style="{background: orbGradient2}"></view>
			<view class="glow-orb orb-3" :style="{background: orbGradient3}"></view>
			<view class="scan-line" :style="{background: scanGradient, boxShadow: scanShadow}"></view>
		</view>
		
		<image class="logo" :class="{'active':active}" src="@/static/logo.png" mode="aspectFit" 
			:style="{filter: logoFilter}"></image>
		<view class="tabbar-box-wrap">
			<view class="tabbar-box" :style="{boxShadow: boxShadow}">
				<view class="tabbar-box-item" @click="goToPage('/pages/addTarbar/detail/release-detail')">
					<image class="box-image" src="@/static/img/release.png" mode="aspectFit"></image>
					<text class="explain">发图文</text>
				</view>
				<view class="tabbar-box-item" @click="goToPage('/pages/addTarbar/detail/video-detail')">
					<image class="box-image" src="@/static/img/video.png" mode="aspectFit"></image>
					<text class="explain">建任务</text>
				</view>
				<view class="tabbar-box-item" @click="goToPage('/pages/addTarbar/detail/qa-detail')">
					<image class="box-image" src="@/static/img/qa.png" mode="aspectFit"></image>
					<text class="explain">提问</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { getThemeStyles } from '@/stores/theme'
	
	export default {
		data() {
			return {
				active: false,
				themeColors: {}
			};
		},
		onLoad() {
			this.updateThemeColors()
		},
		onShow() {
			this.active = true;
			this.updateThemeColors()
		},
		onHide() {
			this.active = false;
		},
		methods: {
			goToPage(url) {
				if (!url) return;
				uni.navigateTo({
					url
				});
			},
			// 更新主题颜色
			updateThemeColors() {
				this.themeColors = getThemeStyles()
			},
			// 生成粒子样式
			getParticleStyle(index) {
				const size = Math.random() * 4 + 2;
				const duration = Math.random() * 10 + 10;
				const delay = Math.random() * 5;
				const startX = Math.random() * 100;
				const startY = Math.random() * 100;
				
				return {
					width: `${size}rpx`,
					height: `${size}rpx`,
					left: `${startX}%`,
					top: `${startY}%`,
					animationDuration: `${duration}s`,
					animationDelay: `${delay}s`,
					background: `rgba(${this.accentColorRgb}, 0.6)`,
					boxShadow: `0 0 10rpx rgba(${this.accentColorRgb}, 0.8)`
				};
			},
			// 十六进制颜色转RGB
			hexToRgb(hex) {
				const color = hex.replace('#', '')
				const r = parseInt(color.substring(0, 2), 16)
				const g = parseInt(color.substring(2, 4), 16)
				const b = parseInt(color.substring(4, 6), 16)
				return `${r}, ${g}, ${b}`
			},
			// 加深颜色
			darkenColor(hex, factor) {
				const color = hex.replace('#', '')
				const r = Math.floor(parseInt(color.substring(0, 2), 16) * factor)
				const g = Math.floor(parseInt(color.substring(2, 4), 16) * factor)
				const b = Math.floor(parseInt(color.substring(4, 6), 16) * factor)
				return `#${r.toString(16).padStart(2, '0')}${g.toString(16).padStart(2, '0')}${b.toString(16).padStart(2, '0')}`
			}
		},
		computed: {
			// 背景渐变色
			backgroundGradient() {
				// 使用深色版本的主题渐变
				const primary = this.themeColors.primaryColor || '#667eea'
				const secondary = this.themeColors.secondaryColor || '#764ba2'
				return `linear-gradient(135deg, ${this.darkenColor(primary, 0.8)} 0%, ${this.darkenColor(secondary, 0.7)} 50%, ${this.darkenColor(primary, 0.75)} 100%)`
			},
			// 主色调（用于粒子、发光球等）
			accentColor() {
				return this.themeColors.accentColor || '#667eea'
			},
			// 主色调RGB（用于rgba）
			accentColorRgb() {
				const color = this.accentColor
				const hex = color.replace('#', '')
				const r = parseInt(hex.substring(0, 2), 16)
				const g = parseInt(hex.substring(2, 4), 16)
				const b = parseInt(hex.substring(4, 6), 16)
				return `${r}, ${g}, ${b}`
			},
			// 电路线渐变
			circuitGradient() {
				return `linear-gradient(90deg, transparent 0%, rgba(${this.accentColorRgb}, 0.4) 50%, transparent 100%)`
			},
			// 发光球渐变1
			orbGradient1() {
				return `radial-gradient(circle, rgba(${this.accentColorRgb}, 0.3) 0%, transparent 70%)`
			},
			// 发光球渐变2
			orbGradient2() {
				const secondary = this.themeColors.secondaryColor || '#764ba2'
				const rgb = this.hexToRgb(secondary)
				return `radial-gradient(circle, rgba(${rgb}, 0.25) 0%, transparent 70%)`
			},
			// 发光球渐变3
			orbGradient3() {
				const info = this.themeColors.infoColor || '#00bfff'
				const rgb = this.hexToRgb(info)
				return `radial-gradient(circle, rgba(${rgb}, 0.2) 0%, transparent 70%)`
			},
			// 扫描线渐变
			scanGradient() {
				return `linear-gradient(90deg, transparent 0%, rgba(${this.accentColorRgb}, 0.8) 50%, transparent 100%)`
			},
			// 扫描线阴影
			scanShadow() {
				return `0 0 20rpx rgba(${this.accentColorRgb}, 0.8)`
			},
			// Logo滤镜
			logoFilter() {
				return `drop-shadow(0 0 20rpx rgba(${this.accentColorRgb}, 0.6))`
			},
			// 卡片阴影
			boxShadow() {
				return `0 8rpx 32rpx rgba(${this.accentColorRgb}, 0.3), 0 0 0 2rpx rgba(${this.accentColorRgb}, 0.2)`
			}
		}
	};
</script>

<style lang="scss" scoped>
	.content {
		position: relative;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		/* #ifdef H5 */
		height: calc(100vh - var(--window-bottom) - var(--window-top));
		/* #endif */
		/* #ifndef H5 */
		height: 100vh;
		/* #endif */
		transition: opacity 0.3s;
		opacity: 0;
		overflow: hidden;

		&.active {
			opacity: 1;
		}

		.logo {
			position: relative;
			margin-top: -400upx;
			width: 200upx;
			height: 200upx;
			z-index: 10;
			opacity: 0;
			transition: opacity 0.3s;

			&.active {
				opacity: 1;
				animation: logoFloat 3s ease-in-out infinite;
			}
		}
	}

	@keyframes logoFloat {
		0%, 100% {
			transform: translateY(0);
		}
		50% {
			transform: translateY(-20rpx);
		}
	}

	/* 科技风格背景 */
	.tech-background {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		overflow: hidden;
		z-index: 0;
	}

	/* 粒子容器 */
	.particles-container {
		position: absolute;
		width: 100%;
		height: 100%;
		overflow: hidden;
	}

	.particle {
		position: absolute;
		border-radius: 50%;
		animation: particleFloat 15s linear infinite;
	}

	@keyframes particleFloat {
		0% {
			transform: translateY(0) translateX(0);
			opacity: 0;
		}
		10% {
			opacity: 1;
		}
		90% {
			opacity: 1;
		}
		100% {
			transform: translateY(-100vh) translateX(50rpx);
			opacity: 0;
		}
	}

	/* 电路板线条 */
	.circuit-board {
		position: absolute;
		width: 100%;
		height: 100%;
	}

	.circuit-line {
		position: absolute;
	}

	.circuit-line.horizontal {
		width: 100%;
		height: 2rpx;
		animation: circuitPulse 3s ease-in-out infinite;
	}

	.circuit-line.vertical {
		width: 2rpx;
		height: 100%;
		animation: circuitPulse 3s ease-in-out infinite;
	}

	.line-1 {
		top: 20%;
		animation-delay: 0s;
	}

	.line-2 {
		top: 60%;
		animation-delay: 1.5s;
	}

	.line-3 {
		left: 25%;
		animation-delay: 0.75s;
	}

	.line-4 {
		left: 75%;
		animation-delay: 2.25s;
	}

	@keyframes circuitPulse {
		0%, 100% {
			opacity: 0.2;
		}
		50% {
			opacity: 1;
		}
	}

	/* 发光球体 */
	.glow-orb {
		position: absolute;
		border-radius: 50%;
		filter: blur(60rpx);
		animation: orbFloat 8s ease-in-out infinite;
	}

	.orb-1 {
		top: 10%;
		left: 10%;
		width: 300rpx;
		height: 300rpx;
		animation-delay: 0s;
	}

	.orb-2 {
		top: 50%;
		right: 10%;
		width: 250rpx;
		height: 250rpx;
		animation-delay: 2.5s;
	}

	.orb-3 {
		bottom: 15%;
		left: 50%;
		width: 280rpx;
		height: 280rpx;
		animation-delay: 5s;
	}

	@keyframes orbFloat {
		0%, 100% {
			transform: translate(0, 0) scale(1);
		}
		33% {
			transform: translate(50rpx, -50rpx) scale(1.2);
		}
		66% {
			transform: translate(-30rpx, 30rpx) scale(0.9);
		}
	}

	/* 扫描线 */
	.scan-line {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 4rpx;
		animation: scanMove 4s linear infinite;
	}

	@keyframes scanMove {
		0% {
			transform: translateY(0);
			opacity: 0;
		}
		10% {
			opacity: 1;
		}
		90% {
			opacity: 1;
		}
		100% {
			transform: translateY(100vh);
			opacity: 0;
		}
	}

	.tabbar-box-wrap {
		position: absolute;
		width: 100%;
		padding: 50upx;
		box-sizing: border-box;
		bottom: 0;
		left: 0;
		z-index: 10;

		.tabbar-box {
			position: relative;
			display: flex;
			width: 100%;
			background: rgba(255, 255, 255, 0.95);
			backdrop-filter: blur(20rpx);
			border-radius: 20upx;
			padding: 15upx 20upx;
			box-sizing: border-box;
			z-index: 2;

			&:after {
				content: '';
				position: absolute;
				bottom: -16upx;
				left: 0;
				right: 0;
				margin: auto;
				width: 50upx;
				height: 50upx;
				transform: rotate(45deg);
				background: rgba(255, 255, 255, 0.95);
				backdrop-filter: blur(20rpx);
				z-index: 1;
				border-radius: 2px;
			}

			&:before {
				content: '';
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				background: rgba(255, 255, 255, 0.95);
				border-radius: 20upx;
				z-index: 2;
			}

			.tabbar-box-item {
				width: 100%;
				z-index: 3;
				margin: 10upx;
				color: $uni-color-subtitle;
				text-align: center;
				font-size: $uni-font-size-base;
				transition: all 0.3s ease;
				cursor: pointer;

				&:active {
					transform: scale(0.95);
				}

				.box-image {
					width: 100%;
					height: $uni-img-size-lg;
					transition: all 0.3s ease;
				}

				.explain {
					display: block;
					margin-top: 8rpx;
					font-weight: 500;
				}
			}
		}
	}
</style>